<!--
 * @Date: 2025-09-07 21:10:46
 * @LastEditors: 贾二小 erxiao.jia@outlook.com
 * @LastEditTime: 2025-10-02 15:52:56
 * @FilePath: /admin-vue/src/views/admin/system/user-center/modules/info-operate-modal.vue
-->
<script setup lang="ts">
import type { FormInst, FormRules } from 'naive-ui'

const { update } = useUser()

defineOptions({ name: 'InfoOperateModal' })

const userStore = useUserStore()

const formModel = userStore.info!

const formRef = ref<FormInst | null>(null)

//提交数据
async function handleSubmit(e: MouseEvent) {
  e.preventDefault()
  await formRef.value?.validate(async (errors) => {
    if (!errors) {
      await update(formModel)
    }
  })
}

const rules: FormRules = {
  name: {
    required: true,
    message: '请输入昵称',
    trigger: 'input',
  },
  real_name: {
    required: true,
    message: '请输入姓名',
    trigger: 'input',
  },
  mobile: {
    required: true,
    message: '请输入移动电话',
    trigger: 'input',
  },
  email: [
    {
      required: true,
      message: '请输入邮件地址',
      trigger: 'input',
    },
    {
      type: 'email',
      message: '请输入正确的邮件地址',
      trigger: 'input',
    },
  ],
  sex: {
    required: true,
    message: '请选择性别',
    trigger: 'input',
  },
}
</script>

<template>
  <n-card>
    <n-form ref="formRef" :label-width="80" :model="formModel" :rules="rules">
      <n-form-item label="昵称" path="name">
        <NInput v-model:value="formModel.name" placeholder="请输入昵称" />
      </n-form-item>
      <n-form-item label="姓名" path="real_name">
        <NInput v-model:value="formModel.real_name" placeholder="请输入姓名" />
      </n-form-item>
      <n-form-item label="移动电话" path="mobile">
        <NInput v-model:value="formModel.mobile" placeholder="请输入移动电话" />
      </n-form-item>
      <n-form-item label="邮件地址" path="email">
        <NInput v-model:value="formModel.email" placeholder="请输入邮件地址" />
      </n-form-item>
      <n-form-item label="性别" path="sex">
        <n-radio-group v-model:value="formModel.sex" name="sex">
          <NSpace>
            <n-radio value="男">男</n-radio>
            <n-radio value="女">女</n-radio>
            <n-radio value="保密">保密</n-radio>
          </NSpace>
        </n-radio-group>
      </n-form-item>

      <NButton type="primary" @click="handleSubmit">{{ $t('common.save') }}</NButton>
    </n-form>
  </n-card>
</template>

<style lang="scss" scoped></style>
